<template>
	<view class='page_cont'>
		<view class='title'>您正在更换已绑定手机号</view>
		<view class='box'>
		    <input class='input' maxlength="11" @input="input_mobile" placeholder="请输入手机号" placeholder-style="color:rgba(66,71,82,0.5);"></input>
		</view>
		<view class='box'>
		    <input class='input' maxlength="6" @input="input_code" placeholder="请输入验证码" placeholder-style="color:rgba(66,71,82,0.5);"></input>
			<view class="btn" @click="send_code()" v-if="show_btn">发送验证码</view>
			<view class='text' v-else>重新发送({{time}}s)</view>
		</view>
		<view class='send_btn' :style="{background:mobile&&code?'rgba(91,144,255,1)':'rgba(91,144,255,0.5)'}" @click="confirm_cont()">确定</view>
	</view>
</template>

<script>
	import config from "../../api/config.js"
	import util from "../../utils/util.js"
	export default{
		data(){
			return {
				mobile: '',
				code: '',
				show_btn: true,
				time: 59
			}
		},
		onLoad() {
			
		},
		methods:{
			// 手机号
			input_mobile(e){
				this.mobile=e.detail.value;
			},
			// 验证码
			input_code(e){
				this.code=e.detail.value;
			},
			// 发送验证码
			send_code(){
				if(!util.testMobile(this.mobile)||this.mobile==''){
					util.page_show_toast('手机号码输入有误',1500)
				}else{
					this.user_send_code();
				}
			},
			// 更换
			confirm_cont(){
				if(!util.testMobile(this.mobile)||this.mobile==''||this.code==''){
					return false;
				}
			},
			// 发送验证码
			user_send_code(){
				var params={
					"phone": this.mobile
				}
				config.send_code(params).then(res=>{
					util.page_show_toast("验证码发送成功",1500);
					this.show_btn=false;
					var timer=setInterval(()=>{
						this.time--;
						if(this.time<=0){
							this.show_btn=true;
							this.time=59;
							clearInterval(timer)
						}
					},1000)
				})
			},
			// 更换手机
			change_phone(){
				var params={
					"id": uni.getStorageSync("userinfo").id,
					"phone": this.mobile,
					"code": this.code
				}
				config.change_phone(params).then(res=>{
					util.page_show_toast('更换成功',1500)
					var pages = getCurrentPages();
					var prevPage = pages[pages.length - 2];
					prevPage.$vm.mobile=this.mobile;
					var login_info=uni.getStorageSync("login_info"),userinfo=uni.getStorageSync("userinfo");
					userinfo.phone=this.mobile;
					uni.setStorageSync("userinfo",userinfo)
					if(login_info){
						login_info.phone=this.mobile;
						uni.setStorageSync("login_info",login_info)
					}
					setTimeout(()=>{
						uni.navigateBack({
							delta: 1
					    });
					},1500)
				})
			}
		},
	}
</script>

<style lang="scss">
	.page_cont{
		padding: 34rpx 32rpx;
		.title{
			text-align: left;
			height: 40rpx;
			font-size: 28rpx;
			font-weight:400;
			line-height:40rpx;
			color:rgba(149,152,163,1);
		}
		.box{
			padding: 32rpx 32rpx 32rpx 44rpx;
			background: #F7F9FB;
			border-radius: 16rpx;
			display: flex;
			flex-direction: row;
			margin: 24rpx 0 48rpx 0;
			.input{
				flex: 1;
				text-align: left;
				min-height: 36rpx;
				height: 42rpx;
				font-size: 30rpx;
				font-weight:400;
				line-height: 42rpx;
				color:rgba(66,71,82,1);
			}
			.btn{
				height: 42rpx;
				font-size: 30rpx;
				font-weight:400;
				line-height: 42rpx;
				color: #5B90FF;
			}
			.text{
				height: 42rpx;
				font-size: 30rpx;
				font-weight:400;
				line-height: 42rpx;
				color: rgba(91,144,255,0.5);
			}
		}
		.send_btn{
			margin-top: 100rpx;
			height: 104rpx;
			line-height: 104rpx;
			text-align: center;
			font-size: 36rpx;
			border-radius: 16rpx;
			font-weight:600;
			color: #fff;
			letter-spacing:4rpx;
		}
	}
</style>
